<template>
    <el-dialog v-model="show" title="撒销入库" width="20%" align-center @close="handleClose">
        <el-row>
            <el-col class="flex" :span="24">
                <div class="label">
                    品名规格：
                </div>
                <div>{{ props.initList.specsDetail }}</div>
            </el-col>
            <el-col class="flex" :span="24">
                <div class="label">
                    供应商：
                </div>
                <div>{{ props.initList.supplyFactoryName }}</div>
            </el-col>
            <el-col class="flex" :span="24">
                <div class="label">
                    入库日期：
                </div>
                <div>{{ props.initList.recentInDate }}</div>
            </el-col>
            <el-col class="flex mb10" :span="24">
                <div class="label">
                    入库数量：
                </div>
                <div>{{ props.initList.inNumber }}{{ getUnitLabel(props.initList.purchaseUnit) }} 计 {{
                    Number(props.initList.inNumber) / Number(props.initList.targetNumber) }} {{
                        getUnitLabel(props.initList.auxiliaryUnit) }} </div>
            </el-col>
        </el-row>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="danger" @click="handleSubmit">撤 销</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { cancelInboundApi } from '@/api/sj/purchaseManagement/purchaseOrder/index'

const { proxy } = getCurrentInstance() as any;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);

const { unit_enumeration } = toRefs(proxy?.useDict('unit_enumeration'));

const show = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const form = reactive({
    applyDate: '',
    applyDepartment: '',
});


// 辅助函数获取单位标签
const getUnitLabel = (unitValue: string): string => {
    const unit = unit_enumeration.value?.find((item: any) => item.value === unitValue);
    return unit?.label || '';
};

const handleSubmit = async () => {

    ElMessageBox.confirm('此订单撤销后会回到待入库订单中，请问您确实要这么做么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            try {
                const { code } = await cancelInboundApi(props.initList.purchaseInRecordId)
                if (code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '操作成功!'
                    });
                    emits('submit', true);

                    handleClose();
                }
            } catch (error) {

            }

        })
        .catch(() => { });
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.label {
    height: 32px;
    line-height: 32px;
    font-weight: 700;
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
    width: 100px;
}

.flex {
    display: flex;
    align-items: center;
}
</style>